<!-- eslint-disable no-undef -->
<template>
    <div>
      <!-- 头部 -->
      <van-nav-bar title="我的">
        <template #left>
          <van-icon
            name="cross"
            size="25"
            color="#ea5910"
            @click="$router.go(-1)"
          />
        </template>
        <template #right>
          <van-icon class="search" name="search" size="25" @click="searchClick" />
  
          <van-popover
            v-model:show="showPopover"
            :actions="actions"
            theme="dark"
            placement="bottom-end"
          >
            <template #reference>
              <van-icon name="ellipsis" size="25" @click="ellipsisClick" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <!-- 标签页 -->
      <van-tabs v-model:active="active" @click-tab="onClickTab">
        <!-- 密码登录 -->
        <van-tab title="密码登录" name="1">
          <p>欢迎密码登录</p>
          <van-cell-group inset>
            <van-field
              v-model="username"
              required
              label="用户名"
              placeholder="请输入用户名"
            />
            <van-field
              v-model="password"
              :type="passwordVisibile"
              required
              label="登录密码"
              placeholder="请输入密码"
              error-message="请输入正确格式的密码"
              right-icon="smile-o"
              @click-right-icon="iconClick"
              :rules="[{ required: true }]"
            />
            <div class="twoDiv">
              <router-link to="/register" style="color: red">注册</router-link>
              <router-link to="/findpwd">找回密码</router-link>
            </div>
            <div class="btnbox">
              <van-button type="primary" size="normal" @click="loginBtn"
                >登录</van-button
              >
              <van-button type="primary" size="normal">重置</van-button>
            </div>
          </van-cell-group>
        </van-tab>
  
        <!-- 手机登录 -->
        <van-tab title="手机登录" name="2">
          <van-field
            v-model="phone"
            required
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ pattern: phoneReg }]"
            show-error
            @blur="phoneBlur"
          />
          <van-field
            v-model="code"
            required
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            :rules="[{ pattern: codeReg }]"
          >
            <template #button>
              <van-button size="small" type="primary" @click="sendCode"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div class="twoDiv">
            <router-link to="/register" style="color: red">注册</router-link>
            <router-link to="/findpwd">找回密码</router-link>
          </div>
          <div class="btnbox">
            <van-button type="primary" size="normal" @click="loginBtnPhone"
              >登录</van-button
            >
            <van-button type="primary" size="normal">重置</van-button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { useUserStore} from "../../stores/user";
  import {
    sentCode,
    verifyCode,
    userLogin,
    findUserApi,
    getTokenApi,
  } from "../../api/login";
  
  const store = useUserStore();
  // const route = useRoute();
  const router = useRouter();
  const showPopover = ref(false);
  const active = ref(0);
  
  const phone = ref(""); //手机号
  const phoneReg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; //手机号正则
  const code = ref(""); //验证码
  const codeReg = /[0-9]{4}/; //短信验证码正则
  // 判断类型 密码登录或手机登录
  const onClickTab = ({ name }) => {
    console.log(name);
  };
  const searchClick = () => {
    console.log("进入搜索框");
  };
  const ellipsisClick = () => {
    console.log("111");
  };
  // 密码登录
  const username = ref(""); //用户名
  const password = ref(""); //用户密码
  const flag = ref(false);
  const passwordVisibile = ref("password");
  //密码登录是否可见
  const iconClick = () => {
    flag.value = !flag.value;
    console.log(flag.value);
    !flag.value
      ? (passwordVisibile.value = "password")
      : (passwordVisibile.value = null);
  };
  //点击登录
  const loginBtn = async () => {
    if (username.value && password.value) {
      const res = await userLogin({
        username: username.value,
        password: password.value,
      });
      console.log(res);
    //   console.log(res.data.msg);
    //   if (res.data.code === 200) {
    //     // console.log(res.data.msg);
    //     store.setUserRes(res.data.result);
    //     store.setUserToken(res.data.token);
    //     // router.push("/mine");
    //   }
    } else {
      console.log("请输入信息");
    }
  };
  // //手机登录
  const phoneBlur = () => {
    //手机号失焦
    if (phone.value && phoneReg.test(phone.value)) {
      console.log(213);
    } else {
      console.log(555);
    }
  };
  //手机登录发送验证码
  const sendCode = async () => {
    console.log(1);
    const findUserApiRes = await findUserApi({ phone: phone.value });
    console.log(findUserApiRes);
    if (findUserApiRes.data.result) {
      console.log("手机号已注册");
    }
    if (phone.value && phoneReg.test(phone.value)) {
      const res = await sentCode({
        phone: phone.value,
      });
      console.log(res);
    } else {
      console.log("手机登录有问题");
      // return false;
    }
  };
  const loginBtnPhone = async () => {
    const findUserApiRes = await findUserApi({ phone: phone.value });
    console.log(findUserApiRes);
    if (findUserApiRes.data.code === 200) {
      const obj = findUserApiRes.data.result;
      const res = await verifyCode({
        phone: phone.value,
        captcha: code.value,
      });
      console.log("验证验证码");
      if (res.data.data) {
        const res = await getTokenApi({
          phone: phone.value,
          username: obj.username,
          password: obj.password,
        });
        console.log(res);
        if (res.data.code === 200) {
          store.setUserToken(res.data.token);
        //   router.push("/mine");
        }
      }
    }
    // console.log(res);
    // if (res.data.code === 200) {
    //   let obj = res.data.result;
  
    //   // const res = await userLogin({
    //   //   phone: phone.value,
    //   //   captcha: code.value,
    //   // });
    //   // console.log(res);
    //   console.log(1212121212121);
    // }
  };
  const actions = [
    { text: "选项一", icon: "add-o" },
    { text: "选项二", icon: "music-o" },
    { text: "选项三", icon: "more-o" },
  ];
  </script>
  <style lang="scss">
  .search {
    margin-right: 50px;
  }
  
  .twoDiv {
    display: flex;
    justify-content: space-between;
  
    .twoDiv a {
      display: block;
    }
  }
  
  .btnbox {
    display: flex;
    justify-content: space-evenly;
  }
  </style>
  